<template>
  <view>

    <fui-landscape :show="directShow"  @close="closePopup">
        <view class="body">
            <view class="title">请选择该产品的推广方式</view>

            
            <view class="body-info">
                <view class="info-image">
                    <image style="width: 100%;height: 100%; border-radius:10rpx;"
             :src="leaderboard.image"></image>
                </view>
                <view class="info-content">
                    <view class="content-title">
                        {{leaderboard.name}}
                    </view>
                    <view class="content-platform">支持平台:
                        <image style="width: 25rpx;height: 25rpx; margin-left: 20rpx;"
                        src="/static/dy-logo.png"></image>    
                    </view>

                </view>
            </view>

            <view class="promotion-model mount">
                <view>
                    <view class="tip">挂载推广</view>
                    <view class="info">视频作品左下角直接挂载蓝色锚点链接</view>
                </view>
                <view class="to-l">立即前往</view>
            </view>

            <view class="promotion-model password">
                <view>
                    <view class="tip">口令推广</view>
                    <view class="info">
                        视频作品评论区或标题文案口令引导搜索
                    </view>
                </view>
                <view class="to-l">立即前往</view>
            </view>

        </view>
    </fui-landscape>

  </view>
</template>

<script setup lang="ts">
import type{ Leaderboard } from "@/api/model/dyUserCodeModel";
import type{ DyPlaying  } from "@/api/model/dyUserCodeModel";
interface IProps {
    directShow:boolean
    leaderboard:Leaderboard | DyPlaying
}
withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:directShow'])

const closePopup = ()=>{
    emit('update:directShow',false)
}
</script>

<style lang="scss" scoped>
    .body{
        width: 600rpx;
       
        background: rgb(239,238,254);
        border-radius: 20rpx;
        .title{
            text-align: center;
            margin-top: 20rpx;
            font-weight: bolder;
            color: rgb(95, 84, 163);
        }

        .body-info{
            height: 180rpx;
            background: white;
            margin: 28rpx;
            border-radius: 20rpx;
            display: flex;
            .info-image{
                height: 140rpx;
                width: 140rpx;
                margin: 20rpx;
                border-radius: 20rpx;
            }
            .content-title{
                margin: 28rpx 0;
                font-size: 28rpx;
                width: 340rpx;
            }
            .content-platform{
                background: rgb(247,246,251);
                font-size: 23rpx;
                position: relative;
                top: 10rpx;
                padding: 10rpx;
                border-radius: 20rpx;
                color: $uni-text-color-placeholder;
                display: flex;
                align-items: center
            }
        }
        .promotion-model{
            
            height: 110rpx;
            margin: 28rpx;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx;
            .tip{
                font-weight: bold;
                font-size: 28rpx;
            }
            .to-l{
                color: white;
                font-size: 28rpx;
                height: 60rpx;
                line-height: 60rpx;
                width: 150rpx;
                text-align: center;
                border-radius: 10rpx;
            }
            .info{
                margin-top: 8rpx;
                font-size: 23rpx;
                width: 280rpx;
            }
        }
        .mount{
            background: linear-gradient(white, rgb(255, 244, 210));
            .to-l{
                background: linear-gradient(rgb(255,216,161), rgb(253,162,85));
            }
            .info{
                color: rgb(224,195,165);
            }
        }
        .password{
            background: linear-gradient(white, rgb(234, 215, 255));
            .to-l{
                background: rgb(121,103,239);
            }
            .info{
                color: rgb(177,170,243);
            }
        }
    }   
</style>
